section.col-xs-12.content(ng-controller="ContactsCtrl")
  div(ng-show='debug') This page is not available in debug mode

  div(ng-show="!loadingAccount && !account.Balance && loadState.account && connected && !debug")
    include ../tabs/banner/unfunded
  div(ng-show='hasRTJapanTrust')
    include banner/rtjapan
  div(ng-show='hasRTJapanTrustWithRippling')
    include banner/rtjapanrippling
  div(ng-hide='debug')
    .row
      group.col-sm-12.notification-wrapper(ng-show='notif !== "clear"')
        group(ng-switch="notif")
          group.result-success(ng-switch-when="createContactSuccess")
            h2.tx-status(l10n) A new contact has been successfully added.
          group.result-success(ng-switch-when="updateContactSuccess")
            h2.tx-status(l10n) Your contact has been successfully updated.
          group.result-success(ng-switch-when="removeContactSuccess")
            h2.tx-status(l10n) A contact has been successfully removed.
    form.row-padding-small
        .row.form-group
          .col-xs-12.col-sm-8.col-md-6
            label(l10n) Filter contacts
            input.form-control(
            name='contacts_filter', type='text'
            ng-model='contacts_filter')
    .row.head.hidden-xs
      .col-xs-3.col-sm-3.col-md-3(l10n,
          rp-sort-header="sort_options.sort_field"
          rp-sort-header-reverse="sort_options.reverse"
          rp-sort-header-field="contact") Contact
        i.fa.fa-fw.fa-caret-down
      .col-xs-6.col-sm-5.col-md-6(l10n,
          rp-sort-header="sort_options.sort_field"
          rp-sort-header-reverse="sort_options.reverse"
          rp-sort-header-field="address") Ripple name or address
        i.fa.fa-fw.fa-caret-down
      .col-xs-12.col-sm-4.col-sm-offset-1.col-md-2.col-md-offset-1.text-right
        a.btn.btn-block.btn-success.btn-sm.sign(ng-click='toggle_form()', ng-disabled='addform_visible', l10n) Add contact
  hr
  .row.head.visible-xs(ng-show='!debug')
    .col-xs-12.col-sm-2
      a.btn.btn-success.btn-block.btn-sm.sign.custom-btn(ng-click='toggle_form()', ng-disabled='addform_visible', l10n) Add contact
  .row.row-padding-small.addForm(ng-show='addform_visible && !debug')
    .col-xs-12.col-md-6.col-sm-8
      form#addForm(name="addForm", ng-submit="create()", rp-unique-scope)
        .form-group
          label(for='Name', l10n) Contact
          input.form-control.input-lg.name#name(name='name', type='text', step='any', maxlength="70"
            ng-model='contact.name'
            rp-unique='userBlob.data.contacts'
            rp-unique-field='name'
            rp-autofill='$routeParams.name', rp-autofill-on='addform_visible = true'
            required
            rp-focus)
          .errorGroup(ng-messages='addForm.name.$dirty && addForm.name.$error')
            .error(ng-message='required', l10n) Please enter a contact.
            .error(ng-message='rpUnique', l10n)
              | This contact already exists.
        .form-group
          div
            label(for='address_web', l10n) Ripple name or address
            .spinnerEnabledInput
              input.form-control.input-lg.address#address_web(
                name='address_web', type='text', step='any'
                ng-model='contact.view'
                rp-dest, rp-dest-address, rp-dest-bitcoin, rp-dest-ripple-name, rp-dest-ripple-name-no-tilde
                rp-dest-email, rp-dest-check-federation, rp-dest-federation-model="contact.federation"
                rp-dest-model="contact.address"
                rp-unique='userBlob.data.contacts'
                rp-unique-field='address'
                rp-unique-group='address-dt-web'
                rp-spinner
                rp-autofill='$routeParams.to', rp-autofill-on='addform_visible = true'
                required)
            .errorGroup(ng-messages='addForm.address_web.$dirty && addForm.address_web.$error')
              .error(ng-message='required', l10n) Please enter a Ripple name.
              .error(ng-message='rpUnique', l10n) You already have a contact with the same Ripple name and/or the same Destination tag.
              .error(ng-message='rpDest', l10n) Not a valid Ripple name or address.
        .form-group
          div(ng-hide='contact.federation')
            label(for='dt_web', l10n) Destination tag
            input.form-control.input-lg.dt#dt_web(
              name='dt_web', type='text', step='any'
              l10n-placeholder="Leave blank if not applicable"
              ng-model='contact.dt'
              rp-unique='userBlob.data.contacts'
              rp-unique-field='dt'
              rp-unique-group='address-dt-web'
              rp-stdt
              rp-autofill='$routeParams.dt')
            .errorGroup(ng-messages='addForm.dt_web.$error')
              .error(ng-message='rpStdt', l10n) Invalid destination tag
              .error(ng-message='rpUnique', l10n) You already have a contact with the same Ripple name and/or the same Destination tag.
        .row
          .col-xs-8.col-sm-8.col-md-9.text-left
            button.btn.btn-success.btn-block.submit.custom-btn(type='submit', ng-disabled='addForm.$invalid || addForm.$pending', l10n) Add contact
          .col-xs-4.col-sm-4.col-md-3.text-center
            button.btn.btn-default.btn-block.custom-btn.btn-cancel(type='button', ng-click='addform_visible = false', l10n) cancel

  .row.contact(ng-repeat="entry in userBlob.data.contacts | rpsortcontacts:sort_options.sort_field:sort_options.reverse"
      ng-if="!contacts_filter || entry.name.toLowerCase().indexOf(contacts_filter.toLowerCase()) > -1"
      ng-class="{editing: editing}"
      ng-controller="ContactRowCtrl"
      ng-show='!debug')
    .col-xs-3.col-md-3.col-sm-3(ng-hide='editing')
      span.name(ng-hide='editing', ng-bind="entry.name") 
    .col-xs-12.col-sm-6.col-md-6(ng-hide='editing')
      div.hidden-xs
        b {{entry.address | rpaddressorigin}}: 
        b(rp-ripple-name="entry.address") ???
    .col-xs-6.col-sm-3.col-md-3.text-right.pull-right(ng-hide='editing')
      .row
        .col-xs-4.col-md-4.col-sm-4(ng-hide='editing')
          button.edit.btn.btn-block.btn-default.btn-sm.btn-link(ng-click='edit($index)', l10n) edit
        //- .col-xs-4.col-md-4.col-sm-4(ng-hide='editing')
        //-   button.editing.btn-block.btn.btn-default.btn-sm.btn-cancel(ng-click='cancel($index)', l10n) cancel
        .col-xs-8.col-md-8.col-sm-8(ng-hide='editing')
          button.send.btn.btn-block.btn-primary.btn-sm(ng-click='send($index)', l10n) Send
    .col-xs-12
      div.row(ng-show='editing')
        div.col-md-3.col-sm-4.col-xs-12.contact-input-wrapper
          ng-form.inline-name-form(name='inlineName')
            input.form-control(name='editname', type="text", class="inline", maxlength="70"
              ng-model='editname'
              rp-unique='userBlob.data.contacts'
              rp-unique-field='name'
              rp-unique-orig='entry.name'
              ng-enter="update($index)")
            .errorGroup(ng-messages='inlineName.editname.$error')
              .error(ng-message='rpUnique', l10n)
                | You already have a contact with the same name.
        div.col-md-4.col-sm-4.col-xs-12.address-wrapper
          ng-form(name='inlineAddress')
            input.form-control.inline(
              name='editaddress', type="text"
              ng-model='editaddress'
              rp-unique='userBlob.data.contacts'
              rp-unique-field='address'
              rp-unique-orig='entry.address'
              rp-dest, rp-dest-address, rp-dest-bitcoin
              rp-dest-email, rp-dest-check-federation, rp-dest-federation-model="entry.federation"
              ng-enter="update($index)")
            .errorGroup(ng-messages='inlineAddress.editaddress.$error')
              .error(ng-message='rpUnique', l10n) You already have this address.
              .error(ng-message='rpDest', l10n) Not a valid address.
            .form-group(ng-hide='entry.federation')
              label(for="contact_dt", l10n) Destination tag
              input.form-control.dt.inline#contact_dt(
                name='dt', type='text', step='any'
                placeholder="Leave blank if not applicable"
                ng-model='editdt'
                rp-stdt
                rp-autofill='$routeParams.dt'
                ng-enter="update($index)")
              .errorGroup(ng-messages='inlineAddress.dt.$error')
                .error(ng-message='rpStdt', l10n) Invalid destination tag.
        div.col-md-5.col-sm-4.col-xs-12
          .row
            .col-xs-4.col-md-4
              button.save.btn.btn-block.btn-success(
                ng-disabled="inlineAddress.editaddress.$error.rpUnique || inlineName.editname.$error.rpUnique || inlineAddress.editaddress.$error.rpDest"
                ng-click='update($index)', l10n) Save
            .col-xs-4.col-md-4
              rp-confirm(
                action-text="Are you sure you want to delete this contact?"
                action-button-text="Delete"
                action-button-css="btn btn-default btn-danger delete-contact-btn"
                action-function="remove($index)"
                cancel-button-css="btn btn-default cancel-btn btn-cancel"
                cancel-button-text="Cancel"
                ng-hide="showPassword==true")
                  a.btn.btn-danger.btn-block(href="", l10n) Delete
            .col-xs-4.col-md-4(ng-show='editing')
              button.editing.btn-block.btn.btn-default.btn-sm.btn-cancel(ng-click='cancel($index)', l10n) cancel        
  div(ng-hide="userBlob.data.contacts.length || debug", l10n) You don't have any contacts yet.
    |  Click on 'Add contact' button in the top right corner to add a new contact.
